<template>
  <div class="dashboard">
    <h1>仪表盘</h1>
    
    <el-row :gutter="20" class="stat-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #409EFF">
              <el-icon><Box /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.inventoryCount }}</div>
              <div class="stat-label">库存物料</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #67C23A">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.workOrderCount }}</div>
              <div class="stat-label">进行中的工单</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #E6A23C">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.todayProduction }}</div>
              <div class="stat-label">今日产量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #F56C6C">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.alertCount }}</div>
              <div class="stat-label">异常告警</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>生产趋势</span>
          </template>
          <div ref="productionChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>工单状态分布</span>
          </template>
          <div ref="workOrderChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>最近工单</span>
          </template>
          <el-table :data="recentWorkOrders" style="width: 100%">
            <el-table-column prop="workOrderNo" label="工单号" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="planQuantity" label="计划数量" />
            <el-table-column prop="actualQuantity" label="实际数量" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { getRealtimeData } from '@/utils/api'

const stats = ref({
  inventoryCount: 0,
  workOrderCount: 0,
  todayProduction: 0,
  alertCount: 0
})

const recentWorkOrders = ref([])
const productionChart = ref()
const workOrderChart = ref()

let productionChartInstance = null
let workOrderChartInstance = null

const getStatusType = (status) => {
  const map = {
    pending: 'info',
    running: 'primary',
    completed: 'success',
    stopped: 'danger'
  }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = {
    pending: '待生产',
    running: '生产中',
    completed: '已完成',
    stopped: '已停止'
  }
  return map[status] || status
}

const initCharts = () => {
  // 生产趋势图
  productionChartInstance = echarts.init(productionChart.value)
  productionChartInstance.setOption({
    title: { text: '近7天生产量' },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line',
      smooth: true
    }]
  })

  // 工单状态分布图
  workOrderChartInstance = echarts.init(workOrderChart.value)
  workOrderChartInstance.setOption({
    title: { text: '工单状态分布' },
    tooltip: {},
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 10, name: '待生产' },
        { value: 20, name: '生产中' },
        { value: 15, name: '已完成' },
        { value: 5, name: '已停止' }
      ]
    }]
  })
}

const loadData = async () => {
  try {
    const data = await getRealtimeData()
    stats.value = data.stats
    recentWorkOrders.value = data.recentWorkOrders
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

onMounted(() => {
  loadData()
  initCharts()
  
  // 响应式处理
  window.addEventListener('resize', () => {
    productionChartInstance?.resize()
    workOrderChartInstance?.resize()
  })
})

onUnmounted(() => {
  productionChartInstance?.dispose()
  workOrderChartInstance?.dispose()
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stat-row {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}

.stat-info {
  margin-left: 20px;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.chart-row {
  margin-bottom: 20px;
}

.table-row {
  margin-bottom: 20px;
}
</style>
